<template>
	<s-layout navbar="inner1"  :bgStyle="{ color: '#fff' }">
		<assNavbar title="鲸囍生活圈" :background="{
			img:'none',
			BGcolor:'#F7D142'
		}"/>
		<view class="bgTop"></view>
		<view class="content ss-p-x-38">
			<view class="ss-flex justify-between ">
				<view class="ss-flex" @tap="onchangeArea">
					<uni-icons type="location" size="20"></uni-icons>
					<view class="ss-m-l-10">{{state.address}}</view>
				</view>
				<!-- <button class="ss-reset-button btn1" @tap="sheep.$router.go('/pages/order/list')">
					<uni-icons type="wallet" size="20"></uni-icons>
					<view >订单</view>
				</button> -->
			</view>
			
			  
			<view  class="search">
				
				<input type="text" class="keyword" @confirm="getList(1)" v-model="state.keyword"
					placeholder="" />
				<view class="line"></view>
				<view class="ss-p-r-16" @tap="onSearch()">搜索</view>
			</view>
			<view class="ss-flex justify-between">
				<view class="banner1">
					<!-- :list="[{src:'/storage/shopbanner/20250408/2c3eca4c4ab3be406b56254c3b2cee13.png',type:'image'}]" -->
					<su-swiper
					  :list="[{src:state.bannerList.left,type:'image'}]"
					  :dotStyle="dotMap[1]"
					  dotCur="bg-mask-40"
					  :seizeHeight="300"
					  imageMode="heightFix"
					/>
				</view>
				<view>
					<view class="banner2">
						<!-- :list="[{src:'/storage/shopbanner/20250408/4141d2fde008e31c7600c35cf3004488.png',type:'image'}]" -->
						<su-swiper
						 :list="[{src:state.bannerList.right,type:'image'}]"
						  :dotStyle="dotMap[1]"
						  dotCur="bg-mask-40"
						  :seizeHeight="150"
						  imageMode="heightFix"
						/>
					</view>
					<view class="ss-flex justify-between ss-m-t-15">
						<view @tap="tapTop(1)" class="box-1 ss-p-t-20">
							<image style="width:60rpx;height:60rpx " :src="sheep.$url.cdn('/storage/sjrz/20250407/2ffcf7e61f85e5247749dd9397e23368.png')"></image>
							<view class="ss-m-t-10">商家入驻</view>
						</view>
						<view @tap="tapTop(2)" class="box-1">
							<image style="width:90rpx;height:90rpx " :src="sheep.$url.cdn('/storage/sjrz/20250407/7c2c2852763c82b6d6f5b45b8f604503.png')"></image>
							<view>企业微信</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="ss-m-y-20 ">
				<view style="color:#9E9E9E;font-size: 28rpx;">店铺列表</view>
				<!-- <dropDownMenu @customClick="customClick" barTextColor="#9E9E9E" activeColor="#000000" :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></dropDownMenu> -->
			</view>
			
			<scroll-view @scroll="scroll" :scroll-top="state.scrollTop" class="scroll-view" scroll-y :style="{height:scrollHeight*2+'rpx'}" @scrolltolower="getList">
				<template v-for="(item,index) in state.shopList" :key="index">
					<shop-item :data="item" @item-click="itemClick(item)"></shop-item>
				</template>
				
				<s-empty v-if="state.shopList.length === 0" icon="/static/data-empty.png" text="暂无商铺">
				</s-empty>
			</scroll-view>
		</view>
		<view class="box-top"  v-if="state.showTop"  @tap="goToTop">
			<uni-icons type="up" size="30" color="#ccc"></uni-icons>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import lifeApi from '@/sheep/api/life'
	import assNavbar from "@/components/ass-navbar.vue"
	import dropDownMenu from "@/pages/merchant/components/cc-dropDownMenu.vue"
	import shopItem from "@/pages/merchant/components/shop-item.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide,onReachBottom } from '@dcloudio/uni-app';
	import userApi from "@/sheep/api/user.js"
	import merchantApi from "@/sheep/api/merchant.js"
	import _ from 'lodash'
	const sys_navBar = sheep.$platform.navbar;//标题栏高度
 	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		keyword:'',
		filterResultData:{},
		shopList:[],
		bannerList:{},
		loadStatus: 'more',
		// 页数
		page: 0,
		pos:{},
		
		address:'杭州市',
		scrollTop:0,
		showTop:false,
		oldScrollTop:0
		
	})
	let scrollHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 350))
	
	
	  const imgList=[
		  {poster: "",src: "/storage/shopbanner/20250408/4141d2fde008e31c7600c35cf3004488.png",title: "banner01",type: "image",url: "/pages/goods/index?id=1489"},
		  {poster: "",src: "/storage/shopbanner/20250408/2c3eca4c4ab3be406b56254c3b2cee13.png",title: "banner01",type: "image",url: "/pages/goods/index?id=1489"},
	  ]
	const dotMap = {
		1: 'long',
		2: 'tag',
	  };
  const styles={
	  width:'330rpx',
	  height:'300rpx'
  }
  const titleArr=['店铺列表', '全部分类', '附近商圈', '智能排序']
 const dropArr=[
	 [],
	 [{text:'手机',value:1},{text:'医疗保健',value:2},{text:'内衣配饰',value:3},{text:'计生情趣',value:4},{text:'生活旅行',value:5}],
	 [{text:'1km',value:1},{text:'2km',value:2},{text:'5km',value:5},{text:'10km',value:10},{text:'20km',value:20}],
	 [{text:'智能排序',value:1},{text:'评分优先',value:1},{text:'销量优先',value:2},{text:'距离优先',value:3},{text:'品质优先',value:4}],
 ]
 
 function scroll(e){
	 if(e.detail.scrollTop>140){
		 state.oldScrollTop=e.detail.scrollTop
		 state.showTop=true
	 }else{
		 state.showTop=false
	 }
 }
 
 function goToTop(){
	 state.scrollTop=state.oldScrollTop
	 setTimeout(()=>{
		 state.scrollTop=0;
	 },100)
	 state.showTop=false
 }
 
 
 // 切换城市
 function onchangeArea() {
 	// #ifdef APP
 	if (sheep.$store('permission').locate === 1) {
 		// #endif
 		uni.navigateTo({
 			url: '/pages/etc/chooseArea',
 			events: {
 				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
 				acceptDataFromOpenedPage: function(data) {
 					changeAddress();
 				},
 			},
 			success: function(res) {
 				// 通过eventChannel向被打开页面传送数据
 				res.eventChannel.emit('acceptDataFromOpenerPage', {});
 			},
 		});
 		// #ifdef APP
 	}
 	// #endif
 };
 async function changeAddress() {
 	if (uni.getStorageSync('location')) {
 		state.pos = JSON.parse(uni.getStorageSync('location'));
		
		const res = await sheep.$api.merchant.surprise.getLocation({
			latitude:state.pos.latitude,
			longitude:state.pos.longitude
		})
		if(res.error==0){
			state.address= res.data;
		}
 		
 	}
 };
 
 
	function  finishClick(resultData) {
		state.filterResultData = resultData;
		console.log(resultData)
		
	}
	
	function customClick(e){
		console.log(e)
	}
	function onSearch(){
		console.log('搜素',state.keyword)
		getList(1)
	}
	
	const itemClick=(e)=>{
		 sheep.$router.go('/pages/merchant/surprise/shop', { id: e.id,name:e.name });
	}
	
	
	async function getList(page) {
	  if (state.loadStatus == 'no-more'&&page!=1) return
	  
	  state.loadStatus = 'loading'
	  
	  var filter = { 
		  service_category_id:'all',
		  keyword:state.keyword,
		  page: state.page + 1,
		  list_rows:10,
		  lat:state.pos?.latitude||30.23555800000002,
		  lng:state.pos?.longitude||120.25218299999995,
		}
	if(page){
		filter.page=page
	}
	  
	  const {  data,error } = await sheep.$api.merchant.surprise.shopList(filter)
	  // const { data,error } = await lifeApi.storeList(filter)
	  if(error == 0){
		  state.bannerList=data.banner
		  state.page = data.list.current_page;
		  if(state.page==1){
			  state.shopList=data.list.data
		  }else{
			  state.shopList.push(data.list.data)
		  }
		  state.loadStatus = (data.list.current_page >= data.list.last_page) ? 'no-more' : 'more'
	  }
	
	}
	
	function tapTop(index){
		if(index==1){
			sheep.$router.go('/pages/commission/merchant/index')
		}else{
			uni.showToast({
				title:'暂未开放',
				icon:'none'
			})
		}
	}
	
	
	onReachBottom(()=>{
		 getList();
	})
	
	
	
	onLoad((options)=>{
		if(options.keyword){
			state.keyword=options.keyword
		}
		state.pos=uni.getStorageSync('location')||{}
		getList()
	})
	
	
	onShow(()=>{
	})
	
</script>

<style lang="scss" scoped>
	
	.banner1{
		width:330rpx;
		height:300rpx;
		border-radius: 20rpx;
		overflow:hidden;
	}
	.banner2{
		width: 330rpx;
		height: 150rpx;
		border-radius: 20rpx;
		overflow:hidden;
	}
	.box-1{
		display:block;
		width: 150rpx;
		height: 135rpx;
		border-radius: 20rpx;
		text-align:center;
		box-sizing: border-box;
		
	}
	.bgTop{
		width:100%;
		height:640rpx;
		margin-top:v-bind('-sys_navBar+"px"');
		margin-bottom:-450rpx;
		background: linear-gradient(180deg, #F7D142 21%, #FCFDFF 71%, #FFFFFF 71%);
	}
	:deep().u-tabs{
		background:transparent!important;
		border:none!important;
		margin-top:-40rpx!important;
		margin-bottom:10rpx;
		
	}
	:deep()uni-swiper{
		height:max-content!important;
	}
	.content{
		
		.btn[disabled]{
			background:rgba(115, 121, 136, 0.4)!important;
		}
		.btn1{
			width: 122rpx;
			height: 52rpx;
			border-radius: 100rpx;
			background: #E9C83E;
			font-size: 28rpx;
		}
		
	}
	.box-top{
		position:fixed;
		bottom:200rpx;
		right:50rpx;
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.3);
		border-radius:10rpx;
		background-color: rgba(0, 0, 0,0.5) ;
	}
	.search {
		height: 70rpx;
		margin: 16rpx 0 54rpx  0;
		padding:0 20rpx;
		border-radius: 350rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		.line {
			width: 4rpx;
			height: 40rpx;
			background-color: #e9e9e9;
			margin-right:20rpx;
		}
	
		.keyword {
			font-size: 24rpx;
			flex: 1;
			height: 1;
			font-weight: 500;
			color: #999999;
		}
		
		
	}
</style>